<template>
  <div style="margin-top: 10px" class="shadow-md p-4 rounded m-2">
    <el-skeleton
      :loading="loading"
      style="--el-skeleton-circle-size: 40px"
      animated
    >
      <template #template>
        <el-skeleton-item style="display: block; width: 120px" variant="h1" />
        <el-row :gutter="30" style="margin-top: 10px">
          <el-col>
            <el-row>
              <el-skeleton-item variant="circle" style="margin-right: 10px" />
              <div>
                <el-skeleton-item
                  style="display: block; width: 120px"
                  variant="h3"
                />
                <el-skeleton-item
                  style="display: block; width: 100px; margin-top: 10px"
                  variant="h3"
                />
              </div>
            </el-row>
          </el-col>
        </el-row>
      </template>
      <template #default>
        <el-text class="text-xl font-semibold" v-if="title" type="primary">{{ title }}</el-text>
        <!-- <span class="text-xl font-extrabold" v-if="title">{{ title }}</span> -->
        <el-row style="margin-top: 6px">
          <el-col class="statistics-contain" :span="24">
            <!-- <div class="circle-text">
              {{ abbrChar }}
            </div> -->
            <div class="flex gap-8">
              <div v-for="(value, key) in data" :key="key" >
                <div class="statname tracking-widest text-sm font-bold">
                  {{ zhKey(key) }}
                </div>
                <span class="statnum mx-1 text-xl">{{
                  value.length ? value[0] : value
                }}</span>
                <el-text type="info" class="text-base"> 樘 </el-text>
                <span class="statnum mx-1 text-xl">{{
                  value.length ? (value[1] / 10000).toFixed(1) : "/"
                }}</span>
                <el-text type="info" class="text-base"> 万 </el-text>
              </div>
            </div>
            <!-- <div>
              <div class="statname">{{ zhKey(key) }}</div>
              <span class="statnum">{{ value }}</span
              >单 <span class="statnum">{{ "/" }}</span
              >樘
            </div> -->
          </el-col>
        </el-row>
        <!-- <div class="statistics-contain" v-for="(value, key) in data" :key="key">
          <div class="circle-text">{{ zhKey(key).slice(0, 1) }}</div>
          <div>
            <div class="statname">{{ zhKey(key) }}</div>
            <div class="statnum">{{ value }}</div>
          </div>
        </div> -->
      </template>
    </el-skeleton>
  </div>
</template>
<script setup>
import { zhKey, zhKeyAddr } from "../dict";
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  title: {
    type: String,
    default: () => "",
  },
  loading: {
    type: Boolean,
    default: true,
  },
  abbrChar: {
    type: String,
    default: "文",
  },
});
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
}
.statistics-contain {
  display: flex;
  align-items: center;
  font-size: 14px;

  .circle-text {
    margin-right: 10px;
    width: 40px;
    height: 40px;
    border: 3px solid #3e9eff;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    font-weight: 900;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .statname {
    margin-right: 4px;
  }
  .statnum {
    color: red;
  }
}
</style>
